<template>
    <div class="container">
        <h4>请说说你对这个网站的看法和意见</h4>
        <div class="subContent">
            <textarea name=""  placeholder="请输入评论" v-model="text"></textarea>
            <div>
                <span class="mui-btn mui-btn-success" @click="subContent">提交评论</span>
            </div>
        </div>
        <div class="item_discuss" v-for="(item , ind) in list" :key="ind">
            <h4>{{item.text}}</h4>
            <div>
                <p>
                    <span>{{item.date|time('yyyy-mm-dd hh-mm-ss')}}</span> 
                </p>
                <p>
                    <a  :class="item.select1">
                        <span @click="yes(ind)" :class="['yes','mui-icon-extra','mui-icon-extra-like']">&nbsp;<b>{{item.yesNum}}</b></span> 
                    </a>
                    <a :class="item.select2">
                        <span @click="no(ind)" class="no mui-icon-extra mui-icon-extra-like">&nbsp;<b>{{item.noNum}}</b></span> 
                    </a>
                    <a  class="red">
                        <span @click="del(ind)" class="del red mui-icon mui-icon-trash">删除</span>
                    </a>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import {Toast} from 'mint-ui'
export default {
    props:['ids'],
    data(){
        return {
            list:JSON.parse(localStorage.getItem("webPl")||"[]"),
            yesNum : 0,
            noNum : 0,
            select1:"",
            select2:"",
            key:true,
            tog:0,
            text:""
        }
    },
    created(){
        // this.key = this.list[]
    },
    methods:{
        yes(id){
            this.tog = 1
            this.sleect(id)
        },
        no(id){
            this.tog = 2
            this.sleect(id)
        },
        del(ind){
            this.list.splice(ind,1)
            this.add()
        },
        sleect(id){
            if(this.list[id].key){
                this.tog == 1 ? (this.list[id].yesNum++,this.list[id].select1 = "active") : (this.list[id].noNum++ , this.list[id].select2 = "active")
                this.list[id].key = false
                this.add()
            }
        },
        subContent(){
            var text =this.text,yesNum=this.yesNum,noNum=this.noNum,key=this.key,select1=this.select1,select2=this.select2
            if(text) {
                this.list.push({
                    key,
                    text,
                    noNum,
                    yesNum,
                    select1,
                    select2,
                    date:new Date() 
                })
                this.add()
            }else{
                Toast("请输入评论内容在提交")
            }
        },
        add(){
            localStorage.setItem("webPl",JSON.stringify(this.list))
            Toast("操作成功")
            this.text = ""
        }
    },
    watch:{
        "text":function(res){
            console.log(res)
        }
    }
}
</script>
<style scoped>
    .container{
        /* overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis; */
        padding: 2%;
        padding-bottom: 52px;
    }
    .subContent{
        padding: 2%;
        position: relative;
        background-color: #eef3fa;
    }
    .subContent>div{
        text-align: right
    }
    .no,.yes,.del{
        font-size: 14px;
        margin-right: 10px;
        display: inline-block;
    }
    .red{
        color: red
    }
    .no{
        transform: rotateX(180deg)
    }
    .no>b{
        display: inline-block;
        transform: rotateX(-180deg)
    }
    .item_discuss{
        padding: 2%;
        margin: 10px 0;
        border: 1px solid #d5d5d5;
        box-shadow: 0 0 4px #d5d5d5;

    }
    .item_discuss>div{
        display: flex;
        justify-content: space-between
    }
    .item_discuss>h4{
        margin: 10px 0;
    }
    .item_discuss>div>p>a{
        color: #8F8F94
    }
    .active{
        color: #007aff !important;
    }
    @media screen and (max-width:320px) {
        .no,.yes,.del{
            font-size: 10px;
        }
    }
</style>


